<template>
  <div ><input v-model="user.firstName"/></div>
   <div ><input v-model="user.lastName"/></div>
    <div ><input v-model="myName"/></div>
    <div ><input v-model="yourName"/></div>
    <div ><input v-model="oursName"/></div>
    <div @click="isshow= !isshow">切换</div>
    <child v-if="isshow"></child>
    <div ><input v-model="w"/></div>
    <div ><input v-model="h"/></div>
    <div @click="w++">w++</div>
</template>
<script setup>
import child from "./components/Child.vue"
// beforeCreate created 
// components:{child}
import { 
  ref ,
  reactive ,
  computed ,
  watch,
  onBeforeMount,
  onMounted,
  onUpdated,
  onBeforeUpdate,
  onBeforeUnmount,
  onUnmounted,
  toRefs
  } from 'vue'

  let user = reactive({
    firstName:"第一个名字",
    lastName:"最后一个名字"
  })
  // 通过计算属性的方式 
  // let myName = user.firstName+'和'+user.lastName;
  // vue2.0里面单向计算 A和B值计算出C值的结果 AB的值可以实时影响C值
  // 单C值不能反射影响AB ，3.0同理
  
  let myName = computed(()=>user.firstName+'和'+user.lastName);
  // vue3.0中单向计算name返回的是Ref的对象
  // Vue3.0中计算的computed get set
  console.log(myName.value)
  // Vue3.0 A，B值计算C值 get是C值的结果 set是C值影响AB值的结果
  let yourName = computed({
    get(){
      return user.firstName+'和'+user.lastName
    },
    set(val){
      console.log(val)//改变C值的数据时触发 返回的改变后的C值数据
      
      user.firstName = val.split("和")[0];
      user.lastName = val.split("和")[1];
    }
  })
  // 监听 watch
  let oursName = ref("");
  // watch(监听的对象 , 回调函数 ，基本的配置)
  watch(user , ({firstName,lastName})=>{
    console.log(firstName)
    console.log(lastName)
      oursName.value = firstName + lastName;
  },
  // deep 深度监听
  // immediate 初始化默认会执行一次监听
  {immediate:true , deep:true}
  )
  let isshow = ref(true);
  // toRefs 把reactive里面所有的值变成响应式的ref对象
  let wxh = reactive({
    w:300,
    h:200
  })
 
  // let {w , h } = toRefs(wxh);
  // console.log(q);//ref
  // console.log(qq);
  // ...toRefs(wxh);
  console.log(toRefs(wxh))
// 整个js就一个setup 好处是不用return
</script>